import {ProColumns, ProTable} from '@ant-design/pro-components';
import {Modal} from 'antd';
import React, {useEffect, useRef} from 'react';
import {effect} from "@umijs/utils/compiled/zod";
import {ProFormInstance} from "@ant-design/pro-form/lib";

export type props = {
  values: API.InterfaceInfo
  columns: ProColumns<API.InterfaceInfo>[];
  onCancel: () => void;
  onSubmit: (values: API.InterfaceInfo) => Promise<void>;
  visible: boolean;
};

const UpdateForm: React.FC<props> = (props: props) => {
  const {onCancel, onSubmit, values, visible, columns} = props;

  const  fromRef = useRef<ProFormInstance>()

  useEffect(()=>{
    console.log('useEffect->'+values.id)
    fromRef.current?.setFieldsValue(values)
  },[values])

  return (
    <Modal onCancel={() => onCancel?.()} visible={visible} footer={null} >
      <ProTable
        type="form"
        formRef={fromRef}
        columns={columns}
        onSubmit={async (values) => {
          console.log('ProTable->'+JSON.stringify(values))
          onSubmit?.(values);
        }}
      />
    </Modal>
  );
};

export default UpdateForm;
